<template>
  <el-col class="bill">
    <el-col class="title">商品库存列表</el-col>

    <el-col class="tabs">
      <div
        :class="inventory === '成品' ? 'current' : ''"
        @click="handleClick('成品')"
      >
        成品
      </div>
      <div
        :class="inventory === '茶叶' ? 'current' : ''"
        @click="handleClick('茶叶')"
      >
        茶叶
      </div>
      <div
        :class="inventory === '礼盒' ? 'current' : ''"
        @click="handleClick('礼盒')"
      >
        礼盒
      </div>
    </el-col>

    <el-col class="search">
      <el-input
        placeholder="输入商品名称"
        suffix-icon="el-icon-search"
        v-model="name"
        @input="inputSearch"
      ></el-input>
      <div class="tips">
        <div>库存预警</div>
        <div>{{ waringNumber }}</div>
      </div>
    </el-col>

    <el-col class="controls" v-if="inventory != '成品'">
      <div @click="EditDialog">库存修改</div>
      <div @click="get_InventoryRecord">库存修改记录</div>
    </el-col>

    <el-table :data="productList" border stripe size="small">
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="商品名称" width="300">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="剩余库存" width="300">
        <template slot-scope="scope">
          <template>{{ scope.row.inventory }}</template>
          <template v-if="inventory === '茶叶'">g</template>
          <template v-if="inventory === '成品' || inventory === '礼盒'"
            >个</template
          >
        </template>
      </el-table-column>
      <el-table-column label="库存预警">
        <template slot-scope="scope">
          <div v-if="scope.row.waring" class="forewarning">
            <i class="el-icon-warning"></i>
            <div>少于100</div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-col class="class_bottom">
      <el-pagination
        @current-change="handleCurrent"
        :page-size="15"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-col>

    <el-dialog
      title="库存修改记录"
      :visible.sync="recordShow"
      :modal-append-to-body="false"
      width="64%"
      center
    >
      <div>
        <div class="dialog-search">
          <el-input
            placeholder="输入商品名称"
            suffix-icon="el-icon-search"
            size="mini"
            v-model="good_name"
          ></el-input>
          <el-date-picker
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            v-model="dateTime"
            @change="pickerChange"
          >
          </el-date-picker>
          <el-button type="primary" size="mini" @click="get_inventoryUpdateLog"
            >搜索</el-button
          >
        </div>
        <el-table :data="recorList" border stripe size="mini">
          <el-table-column
            v-for="col in columns"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            :width="col.width"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
        <div class="class_bottom">
          <el-pagination
            @current-change="handleCurrents"
            :page-size="15"
            layout="total, prev, pager, next"
            :total="record_total"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="库存修改"
      :visible.sync="editShow"
      :modal-append-to-body="false"
      width="64%"
      :show-close="false"
      center
    >
      <div class="editList">
        <el-button type="primary" plain @click="BasicDataDialog"
          >添加</el-button
        >
        <el-table :data="repertoryList" border stripe size="small">
          <el-table-column label="商品名称" width="300">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="剩余库存">
            <template slot-scope="scope">
              <template>{{ scope.row.inventory }}</template>
              <template v-if="inventory === '茶叶'">g</template>
              <template v-if="inventory === '成品' || inventory === '礼盒'"
                >个</template
              >
            </template>
          </el-table-column>
          <el-table-column label="库存修改量">
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                v-model="scope.row.number"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="修改原因" width="400">
            <template slot-scope="scope">
              <el-input v-model="scope.row.info" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <i
                class="el-icon-delete"
                @click="delRepertory(scope.row.good_id)"
              ></i>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button type="primary" @click="set_goodsNumber">确定</el-button>
          <el-button type="info" @click="cancelEdit">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="基础资料"
      :visible.sync="basicDataShow"
      :modal-append-to-body="false"
      :show-close="false"
      width="64%"
      center
    >
      <div class="basic_data">
        <el-table
          ref="multipleTable"
          :data="inventoryList"
          tooltip-effect="dark"
          width="64%"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="100"> </el-table-column>
          <el-table-column label="商品名称" width="300">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="剩余库存">
            <template slot-scope="scope">{{ scope.row.inventory }}</template>
          </el-table-column>
        </el-table>
        <div>
          <el-button type="primary" @click="handleSelect">确定</el-button>
          <el-button type="info" @click="cancelSelect">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </el-col>
</template>
<script>
export default {
  data() {
    return {
      waringNumber: 0,
      inventory: "成品",
      productList: [],
      total: 0,
      page: 1,
      dateTime: "",
      name: "",
      record_total: 0,
      record_page: 1,
      good_name: "",
      start: "",
      end: "",
      basic_name: "",
      recordShow: false,
      editShow: false,
      basicDataShow: false,
      columns: [
        {
          id: "name",
          label: "商品名称",
        },
        {
          id: "before",
          label: "修改前库存",
        },
        {
          id: "number",
          label: "库存修改量",
          width: "",
        },
        {
          id: "after",
          label: "修改后库存",
        },
        {
          id: "info",
          label: "修改原因",
        },
        {
          id: "created_at",
          label: "修改时间",
        },
      ],
      recorList: [],
      repertoryList: [],
      inventoryList: [],
    };
  },
  mounted() {
    this.get_inventoryList();
  },
  methods: {
    handleClick(tab) {
      this.inventory = tab;
      this.page = 1;
      this.name = "";
      this.get_inventoryList();
    },
    handleCurrent(val) {
      this.page = val;
      this.get_inventoryList();
    },
    inputSearch() {
      this.page = 1;
      this.get_inventoryList();
    },
    selectionChange(val) {
      this.selectList = val;
    },
    EditDialog() {
      this.editShow = true;
      this.repertoryList = [];
    },
    cancelEdit() {
      this.editShow = false;
      this.repertoryList = [];
    },
    BasicDataDialog() {
      this.selectList = [];
      this.editShow = false;
      this.basicDataShow = true;
      this.get_crmClass();
    },
    handleSelect() {
      if (this.repertoryList.length) {
        this.selectList.forEach((element, index) => {
          this.repertoryList.forEach((item) => {
            if (element.good_id === item.good_id) {
              this.selectList.splice(index, 1);
            }
          });
        });

        this.selectList.forEach((item) => {
          let value = {
            good_id: item.good_id,
            name: item.name,
            inventory: item.inventory,
            type: "",
            number: "",
            info: "",
          };
          this.repertoryList = [...this.repertoryList, value];
        });
      } else {
        this.selectList.forEach((item) => {
          let value = {
            good_id: item.good_id,
            name: item.name,
            inventory: item.inventory,
            type: "",
            number: "",
            info: "",
          };
          this.repertoryList = [...this.repertoryList, value];
        });
      }

      this.selectList = [];
      this.editShow = true;
      this.basicDataShow = false;
    },
    cancelSelect() {
      this.selectList = [];
      this.editShow = true;
      this.basicDataShow = false;
    },
    delRepertory(id) {
      this.repertoryList.forEach((item, index) => {
        if (id === item.good_id) {
          this.repertoryList.splice(index, 1);
        }
      });
    },
    pickerChange(value) {
      this.start = value ? this.getTime(value[0]) : "";
      this.end = value ? this.getTime(value[1]) : "";
    },
    getTime(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      return year + "-" + month + "-" + day;
    },
    get_InventoryRecord() {
      this.recordShow = true;
      this.good_name = "";
      this.start = "";
      this.end = "";
      this.record_page = 1;
      this.get_inventoryUpdateLog();
    },
    handleCurrents(val) {
      this.record_page = val;
      this.get_inventoryUpdateLog();
    },
    async get_crmClass() {
      let data = {
        class: this.inventory,
      };
      let res = await this.$store.dispatch("crm_getCrmClass", data);
      if (!res.code) {
        this.inventoryList = res.data;
      }
    },
    async get_inventoryList() {
      let data = {
        name: this.name,
        class: this.inventory,
        page: this.page,
      };
      let res = await this.$store.dispatch("crm_inventoryList", data);
      if (!res.code) {
        this.total = res.data.content.total;
        this.productList = res.data.content.data;
        this.waringNumber = res.data.waringNumber;
      }
    },
    async get_inventoryUpdateLog() {
      let data = {
        name: this.good_name,
        start: this.start,
        end: this.end,
        page: this.record_page,
      };
      let res = await this.$store.dispatch("crm_inventoryUpdateLog", data);
      if (!res.code) {
        this.record_total = res.data.total;
        res.data.data.forEach((item) => {
          if (item.type === "+") {
            item.after = Number(item.before) + Number(item.number);
          } else {
            item.after = Number(item.before) - Number(item.number);
          }
        });
        this.recorList = res.data.data;
      }
    },
    async set_goodsNumber() {
      this.repertoryList.forEach((item) => {
        item.number < 0 ? (item.type = "-") : (item.type = "+");
        item.number = Math.abs(item.number);
      });
      console.log(this.repertoryList);
      let data = {
        class: this.inventory,
        content: JSON.stringify(this.repertoryList),
      };
      let res = await this.$store.dispatch("crm_updateGoodsNumber", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "修改成功",
        });
        this.cancelEdit();
      }
    },
  },
};
</script>
<style lang="scss" >
.bill {
  padding: 30px;
  text-align: left;

  .tabs {
    display: flex;
    align-items: center;
    border-bottom: #999999 solid 1px;

    div {
      padding: 30px;
      color: #333333;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
    }

    .current {
      padding: 30px 30px 26px;
      border-bottom: #339ef9 solid 4px;
    }
  }

  .search {
    display: flex;
    align-items: center;
    padding: 20px 0;

    .el-input {
      width: 35%;
      margin-right: 30px;
    }

    .tips {
      display: flex;
      align-content: center;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      font-size: 14px;
      color: #333333;
      font-weight: bold;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;

      > div:nth-of-type(2) {
        color: #fea800;
        margin-left: 20px;
      }
    }
  }

  .controls {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    div {
      background-color: #409eff;
      background-image: none;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 14px;
      color: #ffffff;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      margin-right: 20px;
      cursor: pointer;
    }
  }

  .forewarning {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #feeff1;
    color: #f85a5a;
    font-size: 14px;
    padding: 2px 0;

    i {
      font-size: 15px;
    }

    div {
      margin-left: 5px;
    }
  }

  .dialog-search {
    display: flex;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .el-input,
    .el-date-editor {
      width: 45%;
    }
  }

  .editList {
    > div:nth-of-type(1) {
      margin: 20px 0;
    }

    > div:nth-of-type(2) {
      display: flex;
      justify-content: center;
    }

    i {
      cursor: pointer;
    }
  }

  .basic_data {
    > div:nth-of-type(1) {
      margin-bottom: 20px;
    }

    > div:nth-of-type(2) {
      display: flex;
      justify-content: center;
    }
  }
}
</style>